<!-- subpkg_consult/order_list/components/order-list.vue -->
<script lang="ts" setup>
import { cancelOrderApi, deleteOrderApi, orderListApi, orderPayApi } from '@/apis/consult';
import type { OrderItem } from '@/types/consult';
import { ref } from 'vue';
import CustomPayment from '@/components/custom-payment/custom-payment.vue';
import { useConfirmPayment } from '@/hooks';
const props = withDefaults(defineProps<{
  type?: number
}>(), {
  type: 1
})
const hasMore = ref(true)
const onScrolltolower = () =>{
  if(hasMore.value) getOrderList()
}
// 1. 分页加载数据
const current = ref(1)
const pageSize = 5
const orderList = ref<OrderItem[]>([])
const loadingStatus = ref('loading')  // 加载状态提示
const getOrderList = async ()=>{
  loadingStatus.value = 'loading'
  const res = await orderListApi({
    type: props.type + '',
    current: current.value + '',
    pageSize: pageSize + ''
  })
  orderList.value.push(...res.rows)
  
  // 判断是否有更多的数据
  if(orderList.value.length === res.total){
    hasMore.value = false
  } else {
    current.value++
  }
  loadingStatus.value = hasMore.value ? 'more' : 'noMore'
}
getOrderList()
//是否关闭下拉刷洗交互
const refresherTriggered = ref(false)
//下拉刷新
const loadNewData = async ()=>{
  refresherTriggered.value = true
  current.value = 1
  orderList.value = []
  await getOrderList()
  refresherTriggered.value = false
}
const cancelOrder = async (id:string)=>{
  await cancelOrderApi(id)
  const order = orderList.value.find(item=>item.id === id)
  if(order){
    order.status = 5
    order.statusValue = '已取消'
  }
  }

// 删除订单
const deleteOrder = async (id: string) => {
  await deleteOrderApi(id)
  orderList.value = orderList.value.filter(item => item.id !== id)
}

// 咨询其它医生
const gotoHome = ()=>{
  uni.switchTab({
    url:'/pages/index/index',
  })
}

// 去问诊室
const gotoRoom = (id: string)=>{
  uni.navigateTo({
    url: `/subpkg_consult/room/index?orderId=${id}`
  })
}
//再次支付
const orderId = ref('')
const amount = ref(0)
const customPaymentRef = ref()
const closePayment = ()=>{
  customPaymentRef.value.close()
}
const gotoPay = (id: string, price: number)=>{
  orderId.value = id
  amount.value = price
  customPaymentRef.value.open()
}
const {confirmPayment} = useConfirmPayment()
</script>

<template>
  <scroll-view :refresher-triggered="refresherTriggered" refresher-enabled refresher-background="#f6f6f6" 
  class="uni-scroll-view" scroll-y @scrolltolower="onScrolltolower" @refresherrefresh="loadNewData">
    <view class="consult-list">
      <view v-for="order in orderList" :key="order.id" class="consult-list-item">
        <view class="consult-header">
          <view class="label">
            <image class="doctor-avatar" :src="order.docInfo?.avatar" />
            <text>{{ order.typeValue }}（自动分配医生）</text>
          </view>
          <text v-if="order.status === 1" class="status color-1">待支付</text>
          <text v-if="order.status === 2" class="status color-2">待接诊</text>
          <text v-if="order.status === 3" class="status color-2">咨询中</text>
          <text v-if="order.status === 4" class="status color-3">已完成</text>
          <text v-if="order.status === 5" class="status color-3">已取消</text>
        </view>

        <navigator class="consult-body" hover-class="none" :url="`/subpkg_consult/order_detail/index?id=${order.id}`">
          <uni-list :border="false">
            <uni-list-item :border="false" title="病情描述" :right-text="order.illnessDesc" />
            <uni-list-item :border="false" title="价格" :right-text="'¥' + order.payment" />
            <uni-list-item :border="false" title="创建时间" :right-text="order.createTime" />
          </uni-list>
        </navigator>

        <view v-if="order.status === 1" class="consult-footer">
          <button class="uni-button minor" @click="cancelOrder(order.id)">取消订单</button>
          <button class="uni-button" @click="gotoPay(order.id, order.payment)">去支付</button>
        </view>
        <view v-if="order.status === 2" class="consult-footer">
          <button class="uni-button minor" @click="cancelOrder(order.id)">取消订单</button>
          <button class="uni-button" @click="gotoRoom(order.id)">继续咨询</button>
        </view>
        <view v-if="order.status === 3" class="consult-footer">
          <button class="uni-button" @click="gotoRoom(order.id)">继续咨询</button>
        </view>
        <view v-if="order.status === 4" class="consult-footer">
          <navigator class="uni-button minor" style="padding-left: 10px;padding-right: 10px;"
            :url="`/subpkg_consult/room/index?orderId=${order.id}`">问诊记录
          </navigator>
          <navigator style="padding-left: 10px;padding-right: 10px;" v-if="order.evaluateId" class="uni-button minor"
            :url="`/subpkg_consult/room/index?orderId=${order.id}`">
            查看评价</navigator>
          <navigator style="padding-left: 10px;padding-right: 10px;" v-else class="uni-button"
            :url="`/subpkg_consult/room/index?orderId=${order.id}`">去评价</navigator>
        </view>
        <view v-if="order.status === 5" class="consult-footer">
          <button class="uni-button minor" @click="deleteOrder(order.id)">删除订单</button>
          <button class="uni-button" @click="gotoHome">咨询其它医生</button>
        </view>
      </view>

      <!-- 加载状态 -->
      <uni-load-more :status="loadingStatus" color="#C3C3C5" :icon-size="16" :content-text="{
        contentdown: '上拉显示更多',
        contentrefresh: '数据正在加载中',
        contentnomore: '没有更多数据了',
      }" />
    </view>
  </scroll-view>
  <CustomPayment ref="customPaymentRef" :order-id="orderId" :amount="amount" @close="closePayment" @confirm="confirmPayment($event, orderId)" />
</template>

<style lang="scss">
@import './styles.scss';
</style>